 <template>
  <div class="order_detail_page">
        <head-top head-title="订单详情" go-back='true'></head-top>
        <section v-if="!showLoading" id="scroll_section" class="scroll_container">
            <section class="scroll_insert">
                <section class="order_container">
                     <ul class="goodinfo" >
                        <li class="goodimg">
                            <img :src="goodimg">
                        </li>
                        <li  class="gooddesc">
                            <span>{{ gooddesc }}</span>
                        </li>
                    </ul>
                     <ul class="orderinfo">
                        <li>
                            <span class="lspan">买家昵称</span>
                            <span class="rspan">{{orderData.user}}</span>
                        </li>
                         <li>
                            <span class="lspan">签收人姓名</span>
                            <span class="rspan">{{ orderData.signer_name }}</span>
                        </li>
                          <li>
                            <span class="lspan">签收人电话</span>
                            <span class="rspan">{{ orderData.signer_mobile }}</span>
                        </li>
                         <li>
                            <span class="lspan">订单编号</span>
                            <span class="rspan">{{ orderData.order_sn }}</span>
                        </li>
                         <li>
                            <span class="lspan">交易时间</span>
                            <span class="rspan">{{orderData.add_time}}</span>
                        </li>
                    </ul>
                </section>
            </section>
        </section>
        <transition name="loading">
            <loading v-if="showLoading"></loading>
        </transition>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'
    import headTop from 'src/components/header/head'
    import {getImgPath} from 'src/components/common/mixin'
    import {getOrderDetail} from 'src/service/getData'
    import loading from 'src/components/common/loading'
    import BScroll from 'better-scroll'
    import {imgBaseUrl} from 'src/config/env'


    export default {

      data(){
            return{
                showLoading: true, //显示加载动画
                orderData: null,
                goodimg:null,
                gooddesc:'',
                goodprice:0,
                imgBaseUrl
            }
        },
        created (){
            this.initData();
        },
        mixins: [getImgPath],
        components: {
            headTop,
            loading,
        },
        computed: {
            ...mapState([
                'orderDetail', 'geohash', 'userInfo'
            ]),
        },
        methods: {
            async initData(){
                console.log('aaaaa')
                   this.orderData = await getOrderDetail( this.$route.query.id);
                let goods = [...this.orderData.good]
                this.$forceUpdate();
                    this.goodimg = this.orderData.good[0].goods.goods_front_image;
                    this.gooddesc = this.orderData.good[0].goods.goods_brief;
                    this.goodprice = this.orderData.good[0].goods.goods_price;

                    this.showLoading = false;
                    this.$nextTick(() => {
                        new BScroll('#scroll_section', {
                            deceleration: 0.001,
                            bounce: true,
                            swipeTime: 1800,
                            click: true,
                        });
                    })

            },
        },
        watch: {
            userInfo: function (value) {
                if (value && value.user_id) {
                    this.initData();
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    .order_container{
         display: block;
        margin-top: 2.15em;

        .goodinfo {

        }
    }

    .goodinfo {
        text-align: left;
        list-style: none;
        padding: 0.1em;
        clear: right;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        background-color: #ffffff;

        li {
            display: inline-block;
        }

        img {
            @include wh(3.5rem, 3.5rem);
            border-radius: 0.1em;
        }

        .gooddesc {
            @include font(0.52em, 0.7rem, 'PingFangSC-Regular');
            margin-bottom: 0.3em;
            white-space: normal;
            word-wrap: break-word;
            margin: 0.1em;
            padding-right: 6.33em;
        }
    }

   .orderinfo{
            padding: 0.1em;
            clear: right;
            overflow: hidden;
            margin-top: 3em;

            li {
                width: 100%;
                margin-bottom: 0.3em;
                float: left;
            }
       .lspan{
           width: 50%;
           @include font(0.42em, 0.6rem, 'PingFangSC-Regular');
           color: grey;
           text-align: left;
           display: inline-block;
            float: left;
           clear: left;
       }
        .rspan{
           width: 50%;
           @include font(0.42em, 0.6rem, 'PingFangSC-Regular');
           color: grey;
            text-align: right;
            display: inline-block;
            float: right;
       }
   }

    .scroll_container{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding-top: 1.95rem;
    }
    .scroll_insert{
        padding-bottom: 3rem;
    }
    .order_title{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: .7rem;
        background-color: #fff;
        margin-bottom: 0.5rem;
        img{
            border: 0.05rem solid $blue;
            border-radius: 50%;
            @include wh(3rem, 3rem);
        }
        p:nth-of-type(1){
            @include sc(.9rem, #333);
            font-weight: bold;
            margin-top: .4rem;
        }
        p:nth-of-type(2){
            @include sc(.55rem, #999);
            width: 10rem;
            margin-top: .3rem;
            text-align: center;
        }
        .order_again{
            @include sc(.6rem, $blue);
            margin-top: .5rem;
            border: 0.025rem solid $blue;
            padding: .15rem .4rem;
            border-radius: .1rem;
        }
    }
    .food_list{
        background-color: #fff;
        .food_list_header{
            @include fj;
            align-items: center;
            padding: .2rem .5rem;
            border-bottom: 1px solid #f5f5f5;
            .shop_name{
                img{
                    @include wh(1.2rem, 1.2rem);
                    vertical-align: middle;
                    margin-right: .2rem;
                }
                span{
                    @include sc(.75rem, #333);
                    font-weight: bold;
                }
            }
            svg{
                @include wh(.6rem, .6rem);
                fill: #666;
            }
        }
        .food_list_ul{
            li{
                @include fj;
                align-items: center;
                padding: 0 .5rem;
                line-height: 2rem;
                .food_name{
                    @include sc(.6rem, #666);
                    flex: 4;
                }
                .quantity_price{
                    flex: 1;
                    @include fj;
                    align-items: center;
                    span:nth-of-type(1){
                        @include sc(.6rem, #ccc);
                    }
                    span:nth-of-type(2){
                        @include sc(.6rem, #666);
                    }
                }
            }
        }
        .deliver_fee{
            @include fj;
            align-items: center;
            padding: 0 .5rem;
            line-height: 2rem;
            border-top: 1px solid #f5f5f5;
            span{
                @include sc(.6rem, #666);
            }
        }
        .pay_ment{
            @include sc(.6rem, #fb6b23);
            border-top: 1px solid #f5f5f5;
            font-weight: bold;
            line-height: 2rem;
            text-align: right;
            padding-right: .5rem;
        }
    }
    .order_detail_style{
        background-color: #fff;
        margin-top: 0.5rem;
        header{
            @include sc(.75rem, #333);
            padding: .5rem;
            border-bottom: 1px solid #f5f5f5;
        }
        .item_style{
            display: flex;
            padding: .5rem;
            p{
                @include sc(.65rem, #666);
                line-height: 1rem;
            }
        }
    }
    .loading-enter-active, .loading-leave-active {
        transition: opacity .7s
    }
    .loading-enter, .loading-leave-active {
        opacity: 0
    }

</style>
